<!--
 * @Author: dengyongliang
 * @Date: 2021-04-15 17:23:32
 * @LastEditTime: 2021-08-16 13:33:58
 * @LastEditors: dengyongliang
 * @Description:
-->
<template>
  <div style="padding: 20px">
    <el-divider content-position="left">样式一</el-divider>
    <si-step type="1" :title="title" :active="active" />
    <el-divider content-position="left">样式二</el-divider>
    <si-step type="2" :title="title" :active="active" />
    <el-divider content-position="left">样式三</el-divider>
    <si-step type="3" :title="title" :active="active" />

    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>
</template>

<script>
export default {
  name: 'DemoStep',
  components: {},
  directives: {},
  props: [],
  data() {
    return {
      title: ['第一步', '第二步', '第三步', '第四步'],
      active: 0
    }
  },
  mounted() {},
  methods: {
    next() {
      if (this.active++ > this.title.length) this.active = 0
    }
  }
}
</script>

<style lang="scss" scoped></style>
